<template>
	<view class="container">
		<view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/password.png"></image>
				<view class="login_from_name">原密码</view>
				<view class="login_from_fun"><input class="uni-input" password type="text" placeholder="请输入原密码"  maxlength="10" v-model="oldPassword"/></view>
			</view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/password.png"></image>
				<view class="login_from_name">新密码</view>
				<view class="login_from_fun"><input class="uni-input" password type="text" placeholder="请输入新密码"  maxlength="10" v-model="newPassword"/></view>
			</view>
			
		</view>
		<view class="login_from_dl">
			<button @click="modifyPassword">提交修改</button>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
	
</template>

<script>
	export default {
			data() {
				return {
					value: '',
					type: 'password',
					passwordIcon: true,
					border: true,
					oldPassword:'',
					newPassword:'',
					username:''
				}
			},
			methods:{
				async modifyPassword() {
					var that = this;
					if (that.oldPassword.length == 0 || that.newPassword.length == 0) { //校验非空
						wx.showToast({ //弹框提示
							icon: 'none',
							title: '登录账号或密码不能为空！',
							duration: 2000,
						})
					} else {
						let params = {
							oldPassword: that.oldPassword,
							newPassword: that.newPassword,
							username:wx.getStorageSync("username")
						};
						const res = await uni.$http.post('modifyPassword', params);
						if (res.data.code == 200) {
							this.$refs.uToast.show({
								title: '密码修改成功',
								type: 'success',
							})
							uni.redirectTo({
							       url: '/pages/home/home'
							   });

						} else {
							wx.showToast({
								icon: 'none',
								title: "密码修改失败"
							})
						}
					}
				
				},
			}
		}
</script>

<style lang="scss">
	.container{
		margin: 50rpx;
		margin-top: 200rpx;
	}
page {
		background: #fff;
	}

	.login_from_input image {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 50rpx 8%;
		align-items: center;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.login_from_fun input {
		width: 70%;
		text-align: left;
		font-size: 27rpx;
	}


	.login_from_dl {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		margin-top: 80rpx;
	}

	.login_from_dl button {
		width: 80%;
		height: 50px;
		line-height: 50px;
		background: #FF3B00;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15px;
		height: 15px;
	}

	.cuIcon-squarecheckfill {
		color: #FF3B00;
	}

	.logo_text text {
		color: #FF3B00;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #FF3B00;
	}

	.eye {
		margin-top: 5rpx;
		width: 55rpx;
		height: 55rpx;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 60%;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #FF3B00;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}
</style>
